<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>CSS黑洞科幻背景动画</title>
    <style>
        html, body, #content {
            width: 100%;
            height: 100%;
            margin: 0;
        }
        body {
            --un: 1vh;
            background: #000;
            overflow: hidden;
        }
        @media only screen and (min-height: 100vw) {
            body {
                --un: 1vw;
            }
        }
        #content {
            --q: 20;
            position: fixed;
            -webkit-perspective: calc(var(--un) * 5);
            perspective: calc(var(--un) * 5);
        }
        #content::after {
            content: "";
            position: absolute;
            width: calc(var(--un) * 2);
            height: calc(var(--un) * 2);
            top: calc(50% - var(--un));
            left: calc(50% - var(--un));
            border-radius: 50%;
            box-shadow: 0 0 calc(var(--un) * 4) calc(var(--un) * 4) #000;
            background: #000;
        }
        #content > div {
            position: absolute;
            top: 50%;
            left: 50%;
            transform-style: preserve-3d;
            transform: rotateX(90deg) rotateY(0) translateY(calc(var(--un) * -300));
            animation: tunnel 9s linear infinite;
        }
        #content > div:last-child {
            animation-duration: 5s;
        }
        #content > div > div {
            position: absolute;
            width: calc(var(--un) * 400 / var(--q));
            height: calc(var(--un) * 400);
            background-size: calc(var(--un) * 400) calc(var(--un) * 100);
            background-position: calc(var(--un) * -400 * (var(--i) - 1) / var(--q));
            background-image: url();
            transform-origin: 0;
            transform: rotateY(calc(360deg * (var(--i) - 1) / var(--q))) translate3d(-50%, 0, calc(var(--un) * 63.25));
        }
        #content > div:last-child > div {
            opacity: 0.625;
        }
        @keyframes tunnel {
            to {
                transform: rotateX(90deg) rotateY(360deg) translateY(calc(var(--un) * -200));
            }
        }
    </style>
</head>
<body>
    <div id="content">
        <div>
            <div style="--i: 1"></div>
            <div style="--i: 2"></div>
            <div style="--i: 3"></div>
            <div style="--i: 4"></div>
            <div style="--i: 5"></div>
            <div style="--i: 6"></div>
            <div style="--i: 7"></div>
            <div style="--i: 8"></div>
            <div style="--i: 9"></div>
            <div style="--i: 10"></div>
            <div style="--i: 11"></div>
            <div style="--i: 12"></div>
            <div style="--i: 13"></div>
            <div style="--i: 14"></div>
            <div style="--i: 15"></div>
            <div style="--i: 16"></div>
            <div style="--i: 17"></div>
            <div style="--i: 18"></div>
            <div style="--i: 19"></div>
            <div style="--i: 20"></div>
        </div>
        <div>
            <div style="--i: 1"></div>
            <div style="--i: 2"></div>
            <div style="--i: 3"></div>
            <div style="--i: 4"></div>
            <div style="--i: 5"></div>
            <div style="--i: 6"></div>
            <div style="--i: 7"></div>
            <div style="--i: 8"></div>
            <div style="--i: 9"></div>
            <div style="--i: 10"></div>
            <div style="--i: 11"></div>
            <div style="--i: 12"></div>
            <div style="--i: 13"></div>
            <div style="--i: 14"></div>
            <div style="--i: 15"></div>
            <div style="--i: 16"></div>
            <div style="--i: 17"></div>
            <div style="--i: 18"></div>
            <div style="--i: 19"></div>
            <div style="--i: 20"></div>
        </div>
    </div>
</body>
</html>